<template>
	<view class="box">
		<view class="top">
			<view class="biao">
				<img src="../../static/biao.png" alt="" @click="eee()"><span>团油</span>
			</view>
			<view class="topn">
				<view class="topn1">
					<view class="topdeng" @click="dengs()">
						<img src="../../static/tou.png" alt="" />
					</view>
					<view class="topdengzi" @click="dengs()">
						点击登录
					</view>
				</view>
				<view class="topn2">
					<img src="../../static/kefu.png" alt="" @click="dengs()" />

				</view>
			</view>
		</view>
		<view class="middle">
			<view class="my">
				我的资产
			</view>
			<view class="biemy">
				<view class="nei">
					<p>- 元</p>
					<span>加油金</span>
				</view>
				<view class="nei">
					<p>- 张</p>
					<span>优惠券</span>
				</view>
				<view class="nei">
					<p>- 个</p>
					<span>红包</span>
				</view>
				<view class="nei">
					<p>- 滴</p>
					<span>油滴</span>
				</view>
			</view>
		</view>
		<!-- <view class="guang">
			<img src="../../static/guang.png" alt="" @click="dengs()" />
		</view> -->
		<view>
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="40">
				<view id="demo1" class="scroll-view-item_H uni-bg-red">
					<img src="../../static/guang.png" alt="" @click="dengs()" />
				</view>
			</scroll-view>
		</view>
		<view class="uni-common-pb"></view>
		<view class="chang">
			<view class="my">
				常用工具
			</view>
			<view class="biemy1">
				<view class="nei1">
					<p><img src="../../static/youjia.png" alt="" @click="dengs()" /></p>
					<span>油价预测</span>
				</view>
				<view class="nei1">
					<p><img src="../../static/chezhu.png" alt="" @click="dengs()" /></p>
					<span>车主权益</span>
				</view>
				<view class="nei1">
					<p><img src="../../static/lipin.png" alt="" @click="dengs()" /></p>
					<span>我的礼品</span>
				</view>
				<view class="nei1">
					<p><img src="../../static/wode.png" alt="" @click="dengs()" /></p>
					<span>我的收藏</span>
				</view>
				<view class="nei1" @click="dengs()">
					<p><img src="../../static/woyao.png" alt="" /></p>
					<span>我要合作</span>
				</view>
			</view>
			<view class="biemy1">
				<view class="nei1">
					<p><img src="../../static/kefu2.png" alt="" @click="dengs()" /></p>
					<span>客服中心</span>
				</view>
				<view class="nei1">
					<p><img src="../../static/gongsi.png" alt="" @click="dengs()" /></p>
					<span>公司管理</span>
				</view>
				<view class="nei1">
					<p><img src="../../static/shezhi.png" alt="" @click="dengs()" /></p>
					<span>设置</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			eee() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			dengs() {
				uni.navigateTo({
					url: "/pages/deng/deng"
				})
			}
		}
	}
</script>

<style scoped>
	.top {
		width: 100%;
		height: 400rpx;
		background: linear-gradient(to right, gainsboro, white);
		border-radius: 0px 0px 30rpx 30rpx;
		padding-top: 100rpx;
		box-sizing: border-box;
		padding: 15rpx;
	}

	.biao {
		display: flex;

		width: 50%;
		margin-top: 20rpx;
		height: 60rpx;
		margin-left: 20rpx;
	}

	.biao span {
		display: block;
		margin-left: 29rpx;
		font-size: 35rpx;
		font-weight: 500;
	}

	.biao img {
		display: block;
		width: 40rpx;
		height: 40rpx;

	}

	.topn {

		margin-top: 50rpx;
		height: auto;
		display: flex;
		justify-content: space-between;
	}

	.topn1 {
		height: auto;
		width: 60%;
		display: flex;
	}

	.topdeng {
		height: 150rpx;
		width: 35%;
		border-radius: 100%;
		background-color: white;
	}

	.topdeng img {
		width: 80%;
		margin-left: 15rpx;
		margin-top: 15rpx;
		height: 75%;
	}

	.topdengzi {
		line-height: 150rpx;
		margin-left: 5%;
		font-size: 35rpx;
		font-weight: 900;
	}

	.topn2 {
		height: 50rpx;
		width: 40%;
		margin-top: 50rpx;
	}

	.topn2 img {
		width: 20%;
		height: 100%;
		float: right;
	}

	.middle {
		position: absolute;
		top: 330rpx;
		width: 90%;
		margin-left: 5%;
		height: 250rpx;
		background-color: white;
		border-radius: 7px;
		padding: 30rpx 30rpx;
		box-sizing: border-box;
	}

	.my {
		font-size: 35rpx;
	}

	.biemy {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;

	}

	.biemy1 {
		margin-top: 30rpx;


	}

	.biemy1 p {
		text-align: center;
	}

	.biemy1 p img {
		width: 60rpx;
		height: 60rpx;
	}

	.nei {
		text-align: left;
		line-height: 50rpx;
	}

	.nei1 {
		margin-bottom: 30rpx;
		line-height: 35rpx;
		float: left;
		margin-left: 25rpx;
	}

	.nei1 span {
		font-size: 25rpx;
	}

	.nei span {
		font-size: 28rpx;
	}

	.scroll-view_H {
		margin-top: 210rpx;
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item_H {
		width: 120%;
		text-align: center;
		height: 190rpx;
		line-height: 190rpx;
	}

	.scroll-view-item_H img {
		text-align: center;
		width: 75%;
		margin: 0 auto;
		height: 100%;
	}

	.chang {
		padding: 30rpx 30rpx;
		box-sizing: border-box;

		height: 350rpx;
		width: 90%;
		margin: 0 auto;
		margin-top: 30rpx;
		border-radius: 18rpx;
		background-color: white;
	}
</style>
